<template>
	<view>
		<view class="flex justify-center align-center my-1">
			<view ><text >活动主题:</text></view>
		  <view class="w-80"> <uni-easyinput type="textarea" v-model="theme" :autoHeight="true" placeholder="请输入主题"></uni-easyinput></textarea></view>
		 </view>
		 <view class="flex justify-center align-center my-2">
		 	<view ><text >开始时间:</text></view>
		      <view class="w-80"><uni-datetime-picker  v-model="eventBeginTime"></uni-datetime-picker></view>
		  </view>
		  <view class="flex justify-center align-center my-2">
		  	<view ><text >结束时间:</text></view>
		       <view class="w-80"><uni-datetime-picker v-model="eventEndTime"></uni-datetime-picker></view>
		   </view>
	   <view class="flex justify-center align-center my-2">
	   	<view ><text>活动地点:</text></view>
	        <view class="w-80"><uni-easyinput type="text" :inputBorder="true" v-model="location" placeholder="请输入地点"></uni-easyinput></view>
	    </view>
		<view class="flex justify-center align-center my-2">
			<view ><text >活动人数:</text></view>
		     <view class="w-80"><slider min="1" max="200" step="1" show-value :value="personNumber" @change="sliderChange" ></slider></view>
		 </view>
		 <view class="flex justify-center align-center my-2">
		 	<view ><text >活动费用:</text></view>
		      <view class="flex align-center w-80 "><uni-easyinput type="text" placeholder="请输入费用/人"  v-model="money" ></uni-easyinput>/人</view>
		  </view>
		 <view class="flex justify-center align-center my-2">
		 	<view ><text >活动分类:</text></view>
		      <view class="w-80"><uni-easyinput type="text"   v-model="type" disabled ></uni-easyinput></view>
		  </view>
		  <view class="flex justify-center align-center my-2">
		  	<view ><text >活动状态:</text></view>
		       <view class="w-80"><uni-easyinput type="text"   v-model="status" disabled ></uni-easyinput></view>
		   </view>
		<uploadImage   @changeImage="changeImage" ref="uploadImage" :list="imageList"  > </uploadImage>
		<!--底部导航 -->
		<view class ="fixed-bottom bg-white flex align-center" style="height:85rpx;">
			<view class="iconfont icon-leimupinleifenleileibie footer-btn animated" hover-class="pulse" @click="changeType"></view>
			<view class="iconfont icon-tupian footer-btn animated" hover-class="pulse" @click="iconClickEvent('uploadImage')"></view>
			<view class="bg-main text-white ml-auto flex align-center justify-center rounded mr-2 animated" hover-class="pulse" @click="submit" style="width: 140rpx;height: 60rpx;">发送</view>
		</view>
	</view>
</template>
  
<script>
	import uploadImage from '@/components/common/upload-image.vue';
	 const typeArray = ['社团活动','自习','观影','运动','购物','其他']
	export default {
		
		components:{
         uploadImage
		},
		data() {
			return {
		    eventId:'',		
			eventBeginTime:'',
			eventEndTime:'',
			theme:'',
			money:'',
			location:'',
			personNumber:0,
			imageList:[],
			type:"电影",
			status:'未开始',
		    picture:''
			}
			
		},
	   onLoad(e) {
	  	  this.initInfo(e.id);
	   },
		methods: {		
			iconClickEvent(e)
			{
				switch(e){
					case 'uploadImage':
					  this.$refs.uploadImage.chooseImage()
					  break;
				}
			},
			changeImage(e){
				console.log(e)
				this.imageList =e;
	       },
		   sliderChange(e)
		   {
			 this.personNumber =  e.detail.value  
		   },
			changeType()
			{
				uni.showActionSheet({
				    itemList: typeArray,
				    success:(res) =>{
						this.type = typeArray[res.tapIndex]
						console.log(this.type)
				    }
				});
				
			},
			submit()
			{
				
				const data ={
					eventId : this.eventId,
					eventStartTime:this.eventBeginTime,
					eventEndTime:this.eventEndTime,
					theme:this.theme,
					location:this.location,
					personNumber:this.personNumber,
					picture:this.imageList[0],
					type:this.type,
					money:this.money,
					status:this.status	
				}
				this.$R.put("/meet/event",data).then((res)=>{
					if(res.code == 200)
					{  
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					
					}
				})
			},
			initInfo(eventId)
			{
				if(eventId!=null)
				{
					this.$R.get('/meet/event/'+eventId).then((res)=>{
					   if(res.code==200){
						   this.eventId = res.data.eventId
						 this.eventBeginTime = res.data.eventStartTime;
						  this.eventEndTime = res.data.eventEndTime;
						   this.theme = res.data.theme
						   this.location = res.data.location
						   this.personNumber = res.data.personNumber
						   this.picture = res.data.picture
						   this.money = res.data.money
						   this.status = res.data.status
						   this.type = res.data.type
						   this.$set(this.imageList,0,res.data.picture)
						 
					   }
					})
					
				}
			}
		},
		computed:{
			show(){
		       return this.imageList.length > 0;		
			}
	     }
	}
</script>

<style>
  .footer-btn{
	  width: 86rpx;
	  height:70rpx;
	  display: flex;
	  justify-content: center;
	  align-content: center;
	  font-size: 50rpx;
  }

</style>
